<script lang="ts" setup>
    import {ref} from "vue";
    let slotName=ref("sy")


</script>

<template>
    <ul>
        <li @click="slotName='sy'">首页</li>
        <li @click="slotName='gwc'">购物车</li>
        <li @click="slotName='wd'">我的</li>
    </ul>
    <slot :name="slotName"></slot>
</template>

<style scoped>
    ul{
        display: flex;
    }
    li{
        list-style-type: none;
        border: 1px solid black;
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }
    li:hover{
        background-color: red;
        color: white;
    }
</style>